<template>
  <div class="introduction-edit-page">
	  <a-tabs default-active-key="2">
	      <a-tab-pane key="1" title="Tab 1">
	        Content of Tab Panel 1
	      </a-tab-pane>
	      <a-tab-pane key="2" title="Tab 2">
	        Content of Tab Panel 2
	      </a-tab-pane>
	      <a-tab-pane key="3">
	        <template #title>Tab 3</template>
	        Content of Tab Panel 3
	      </a-tab-pane>
	    </a-tabs>
    <!-- <h1>园区介绍-编辑</h1> -->
    <!-- 表单信息 start -->
    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
      <a-form-item label="" field="introduction_text">
        <ma-wangEditor v-model="formData.introduction_text" :height="400" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="submit">保存</a-button>
        <a-button style="margin-left: 10px;" @click="emit('close')">关闭</a-button>
      </a-form-item>
    </a-form>
    <!-- 表单信息 end -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import api from '../api/introduction'

const emit = defineEmits(['success', 'close'])
const props = defineProps({
  // 接收要编辑的数据
  editData: {
    type: Object,
    required: true
  }
})

// 引用定义
const formRef = ref()
const loading = ref(false)

// 表单信息
const formData = reactive({
  intro_id: null,
  introduction_text: '',
})

// 验证规则
const rules = {
  introduction_text: [
    { required: true, message: '请输入园区介绍详情', trigger: 'blur' }
  ]
}

// 初始化页面数据
const initPage = async () => {
  // 使用传入的数据初始化表单
  for (const key in formData) {
    if (props.editData[key] !== null && props.editData[key] !== undefined) {
      formData[key] = props.editData[key]
    }
  }
}

// 数据保存
const submit = async () => {
  try {
    await formRef.value.validate()
    loading.value = true
    const result = await api.update(formData.intro_id, formData)
    if (result.code === 200) {
      Message.success('操作成功')
      emit('success')
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    // 防止连续点击提交
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
}

onMounted(() => {
  initPage()
})

defineExpose({ submit })
</script>

<style scoped>
.introduction-edit-page {
  padding: 20px;
}
</style>